<template>
    <div class="CarModel">
        <div class="top">
            <el-form :model="searchForm" ref="searchForm">
                <div class="row">
                    <div class="col">
                        <el-form-item label-width="68px" label="车型编号">
                            <el-input v-model="searchForm.id" placeholder="请输入车型编号"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col">
                        <el-form-item label-width="68px" label="应载重量">
                            <el-select v-model="searchForm.allowableLoad" placeholder="请选择应载重量（吨）">
                                <el-option
                                    v-for="item in weightList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="col">
                        <el-form-item label-width="68px" label="应载体积">
                            <el-select v-model="searchForm.allowableVolume" placeholder="请选择应载体积（m³）">
                                <el-option
                                    v-for="item in volumeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <el-form-item label-width="68px" label="车辆类型">
                            <el-input v-model="searchForm.name" placeholder="请输入车辆类型"></el-input>
                        </el-form-item>
                    </div>

                    <div class="col btn-col">
                        <el-button class="btn btn_search" type="primary" @click="render">搜索</el-button>
                        <el-button class="btn btn_reset" type="primary" @click="reset">重置</el-button>
                    </div>

                    <div class="col"></div>
                </div>

            </el-form>
        </div>

        <div class="bottom">
            <el-button class="btn btn_add" type="primary" @click="add">新增车型</el-button>
            <template>
                <el-table
                    stripe
                    show-overflow-tooltip
                    :data="tableList"
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序号">
                    </el-table-column>
                    <el-table-column
                        min-width="150px"
                        prop="id"
                        label="车型编号">
                    </el-table-column>
                    <el-table-column
                        min-width="100px"
                        prop="name"
                        label="车辆类型">
                    </el-table-column>
                    <el-table-column
                        prop="num"
                        label="车型数量">
                    </el-table-column>
                    <el-table-column
                        min-width="80px"
                        prop="allowableLoad"
                        label="应载重量（吨）">
                    </el-table-column>
                    <el-table-column
                        min-width="80px"
                        prop="allowableVolume"
                        label="应载体积（m³）">
                    </el-table-column>
                    <el-table-column
                        prop="measureLong"
                        label="长（米）">
                    </el-table-column>
                    <el-table-column
                        prop="measureWidth"
                        label="宽（米）">
                    </el-table-column>
                    <el-table-column
                        prop="measureHigh"
                        label="高（米）">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="90">
                        <template v-slot="scope">
                            <el-button type="text" size="small" @click="edit(scope.row.id)" class="edit">编辑</el-button>
                            <el-divider direction="vertical"/>
                            <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogType === 1 ? '新增车型' : '编辑车型'"
            :visible.sync="showDialog"
            width="500px"
            :before-close="close">

            <el-form
                :model="form"
                ref="editForm"
                label-width="80px"
                :rules="rules">
                <el-form-item prop="name" label="车辆类型">
                    <el-input v-model="form.name" placeholder="请输入车辆类型"/>
                </el-form-item>
                <el-form-item prop="allowableLoad" label="应载重量">
                    <el-input v-model="form.allowableLoad" placeholder="请输入应载重量"/>
                </el-form-item>
                <el-form-item prop="allowableVolume" label="应载体积">
                    <el-input v-model="form.allowableVolume" placeholder="请输入应载体积"/>
                </el-form-item>
                <el-form-item prop="measureLong" label="长">
                    <el-input v-model="form.measureLong" placeholder="请输入长"/>
                </el-form-item>
                <el-form-item prop="measureWidth" label="宽">
                    <el-input v-model="form.measureWidth" placeholder="请输入宽"/>
                </el-form-item>
                <el-form-item prop="measureHigh" label="高">
                    <el-input v-model="form.measureHigh" placeholder="请输入高"/>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getCarModel, getModelItem, editModelItem, delModelItem, addModelItem } from '@/api/car-management'
export default {
    name: 'CarModel',
    created () {
        this.render()
    },
    mounted () {
        this.$store.commit('setPageLoading', false)
    },
    data () {
        return {
            showDialog: false,
            dialogType: 1,
            searchForm: {},
            form: {},
            rules: {
                name: [
                    { required: true, message: '请输入车辆类型', trigger: 'blur' }
                ],
                allowableLoad: [
                    { required: true, message: '请输入应载重量', trigger: 'input' }
                ],
                allowableVolume: [
                    { required: true, message: '请输入应载体积', trigger: 'blur' }
                ],
                measureLong: [
                    { required: true, message: '请输入长', trigger: 'blur' }
                ],
                measureWidth: [
                    { required: true, message: '请输入宽', trigger: 'blur' }
                ],
                measureHigh: [
                    { required: true, message: '请输入高', trigger: 'blur' }
                ]
            },
            weightList: [
                { value: 'RANGE_LEVEL_1', label: '< 1.8' },
                { value: 'RANGE_LEVEL_2', label: '1.8 ~ 6.0' },
                { value: 'RANGE_LEVEL_3', label: '6.0 ~ 14.0' },
                { value: 'RANGE_LEVEL_4', label: '14.0 ~ 30.0' },
                { value: 'RANGE_LEVEL_5', label: '30.0 ~ 50.0' },
                { value: 'RANGE_LEVEL_6', label: '50.0 ~ 100.0' },
                { value: 'RANGE_LEVEL_7', label: '> 100.0' },
            ],
            volumeList: [
                { value: 'RANGE_LEVEL_1', label: '< 3' },
                { value: 'RANGE_LEVEL_2', label: '3 ~ 5' },
                { value: 'RANGE_LEVEL_3', label: '5 ~ 10' },
                { value: 'RANGE_LEVEL_4', label: '10 ~ 15' },
                { value: 'RANGE_LEVEL_5', label: '15 ~ 30' },
                { value: 'RANGE_LEVEL_6', label: '30 ~ 50' },
                { value: 'RANGE_LEVEL_7', label: '50 ~ 80' },
                { value: 'RANGE_LEVEL_8', label: '80 ~ 150' },
                { value: 'RANGE_LEVEL_9', label: '> 150' },
            ],
            tableList: [],
            page: 1,
            pageSize: 5,
            total: 0
        }
    },
    methods: {
        async render () {
            const res = await getCarModel({
                ...this.searchForm,
                page: this.page,
                pageSize: this.pageSize
            })
            this.tableList = res.data.data.items
            this.total = +res.data.data.counts
        },
        reset () {
            this.searchForm = {}
            this.render()
        },
        close () {
            this.$refs.editForm.resetFields()
            this.showDialog = false
        },
        async add () {
            this.dialogType = 1
            this.showDialog = true
        },
        async edit (id) {
            this.dialogType = 2
            this.showDialog = true
            const res = await getModelItem(id)
            this.form = res.data.data
        },
        submit () {
            this.$refs.editForm.validate(async valid => {
                if (valid) {
                    if (this.dialogType === 1) {
                /*        const res = await addModelItem({
                            id: '1662800100132466698',
                            name: '123',
                            goodsTypes: null,
                            allowableLoad: 1,
                            allowableVolume: 1,
                            num: 1,
                            measureLong: 1,
                            measureWidth: 1,
                            measureHigh: 1
                        })*/
                        const res = await addModelItem(this.form)
                        if (res.data.msg === 'ok') this.$message.success('新增成功')
                    } else {
                        const res = await editModelItem(this.form)
                        if (res.data.msg === 'ok') this.$message.success('修改成功')
                    }
                    this.showDialog = false
                }
            })
        },
        async del (id) {
            const res = await delModelItem(id)
            if (res.data.msg === 'ok') {
                this.$message.success('删除成功')
                if (this.tableList.length === 1 && this.page > 1) this.page--
                await this.render()
            }
        },
        sizeChange (val) {
            this.pageSize = val
            this.page = 1
            this.render()
        },
        currentChange (val) {
            this.page = val
            this.render()
        }
    }
}
</script>

<style scoped lang="scss">
.CarModel {

    .top {
        background-color: white;
        border-radius: 5px;
        color: #2A2929;
        padding: 12px;
        margin: 12px 12px 24px;

        .row {
            display: flex;

            .col {
                padding: 0 20px;
                flex: 1;

                .btn {
                    width: 100px;
                    height: 40px;
                    font-size: 14px;
                    background: #FFEEEB;
                    border: 1px solid #F3917C;
                    color: #E15536;

                    &:hover {
                        background-color: #FFE2DD;
                    }
                }

                .btn_search {
                    color: white;
                    background: #E15536 !important;

                    &:hover {
                        background-color: #FF7C5F !important;
                    }
                }
            }

            .btn-col {
                display: flex;
                justify-content: right;
                align-items: center;
            }
        }

        ::v-deep .el-form-item {
            margin: 10px 0;

            .el-select {
                width: 100%;
            }

            .el-form-item__label {
                font-size: 14px;
                font-weight: bold;
                color: #2A2929;
            }

            .el-input__inner {
                text-overflow: ellipsis;
            }
        }
    }

    .bottom {
        background-color: white;
        border-radius: 5px;
        color: #2A2929;
        padding: 24px;
        margin: 12px;

        .btn_add {
            color: white;
            background: #E15536 !important;
            margin-bottom: 24px;

            &:hover {
                background-color: #FF7C5F !important;
            }
        }

        ::v-deep .el-table {
            border-top: 1px solid #EBEEF5;
            border-left: 1px solid #EBEEF5;
            border-right: 1px solid #EBEEF5;
            margin-bottom: 24px;

            .el-table__body-wrapper {
                color: #2A2929;
                font-size: 13px;
            }

            .edit {
                color: #419EFF;
            }

            thead tr th:nth-of-type(10) {
                text-align: center;
            }
        }
    }

    ::v-deep .el-dialog {
        border-radius: 8px;
    }
}
</style>
